<template>
    <div class="div-upload" v-if="readyShow">
        <!--<input style="width: 100%; height: 100%" class="input-upload" accept="image/*" type="file"
               @change="uploadFile($event)">-->
        <img :src="showSrc" v-if="showImg" style="width: 80%" @click="uploadFile">
        <el-button type="primary" v-else="showImg" style="width: 60%; text-align: center" @click="uploadFile">上  传
        </el-button>
        <input type="hidden" id="uploadImage4" value="-1"/>
    </div>
</template>

<script>
    import axios from 'axios';
    import conf from 'assets/js/conf.js'
    import util from 'assets/js/util.js'

    export default {
        data() {
            return {
                _file: null,
                showImg: false,
                readyShow: false,
                showSrc: '',
                caseId: 0
            }
        },
        props: [
            'src',
            'target'
        ],
        mounted() {
            if (this.src === "-1") {
                this.showImg = false;
            }
            else {
                this.showImg = true;
                this.showSrc = conf.baseUrl + '/file/get/'+ this.src + '?type=1';
            }

            const _self = this;
            axios.get('http://web.zj.icbc.com.cn/bankruptcy/v1/mobile/pic/getParam?url=' + encodeURIComponent(location.href.split('#')[0]))
                .then((res) => {
                    if (res.data.retCode === '00000') {
                        rel.init({
                            appid: res.data.appid,
                            timestamp: res.data.timestamp,
                            nonceStr: res.data.nonceStr,
                            signature: res.data.signature
                        });
                        rel.ready(function () {
                            _self.readyShow = true;
                        });
                    }
                });
            setTimeout(function () {
                _self.query();
            }, 1000);
        },
        methods: {
            uploadFile: function () {
                const _self = this;
                rel.chooseImage({
                    flag: "0",
                    success: function (res) {
                        rel.uploadImage({
                            localIds: res.retMsg.localIds,
                            success: function (res) {

                            },
                            complete: function (res) {
                                document.getElementById("uploadImage4").value = res.retMsg.url
                            }
                        });
                    },
                });

                /*this._file = event.target.files[0];
                let reader = new FileReader();
                let _self = this;
                reader.onloadend = function () {
                    _self.showSrc = reader.result
                };
                if (this._file) {
                    reader.readAsDataURL(this._file) //64为编码
                } else {
                    _self.showSrc = ''
                }

                let form = new FormData();
                form.append('file', this._file);
                util.ajaxByForm({
                    url:  `/file/upload/` + util.getUrlParam(document.location.href, 'caseId'),
                    form: form,
                    success: function (data) {
                        _self.$emit(_self.target, data.message.id)
                        _self.showImg = true;
                    },
                    error: function (err) {
                        alert('上传失败, 请重试');
                    }
                });*/
            },
            query: function () {
                const _self = this;
                let element = document.getElementById("uploadImage4");
                if (element.value !== "-1") {
                    _self.returnValue(element.value);
                } else {
                    setTimeout(function () {
                        _self.query();
                    }, 1000);
                }
            },
            returnValue: function (url) {
                const _self = this;
                let form = new FormData();
                form.append('url', url);
                util.ajaxByForm({
                    url: `/file/uploadByIcbcUrl`,
                    form: form,
                    success: function (data) {
                        _self.$emit(_self.target, data.data.id);
                        _self.showSrc = url;
                        _self.showImg = true;
                        document.getElementById("uploadImage4").value = "-1";
                        _self.query();
                    },
                    error: function (err) {
                        alert('上传失败, 请重试');
                        document.getElementById("uploadImage4").value = "-1";
                        _self.query();
                    }
                });
            }
        }
    }
</script>

<style>
    .div-upload {
        position: relative;
    }

    .input-upload {
        opacity: 0;
        filter: alpha(opacity=0);
        height: 95px;
        width: 100px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
    }
</style>
